
<template>
  <section class="integralstatistics-main">
    <div class="top-box">
      <el-tabs v-model="active" @tab-click="handleTabClick">
        <el-tab-pane label="积分排行" name="3" />
      </el-tabs>
      <section class="update-time"> <span>排行榜上次更新时间：</span> {{ time }}</section>
    </div>

    <section class="main-inner">
      <template>
        <el-row :gutter="10">
          <el-col :span="6">
            <section class="inner-search">
              <section class="search-item">
                <div class="item-label">真实姓名</div>
                <el-input v-model="search.userRealName" style="width: 100%;" class="filter-item" clearable placeholder="请输入真实姓名筛选" />
              </section>
              <section class="search-item">
                <el-button size="small" type="primary" @click="handleFilter">筛 选</el-button>
                <el-button size="small" type="primary" @click="handleReset">重 置</el-button>
              </section>
            </section>
          </el-col>
          <el-col :span="18">
            <div class="top-container">
              <el-button @click="handleDownload">导 出</el-button>
            </div>
            <section class="inner-table">
              <el-table v-loading="listLoading" :data="list" style="width: 100%">
                <el-table-column prop="rank" label="排名" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.rank == 1" class="svg-container medal">
                      <svg-icon icon-class="gold-medal" />
                    </span>
                    <span v-if="scope.row.rank == 2" class="svg-container medal">
                      <svg-icon icon-class="silver-medal" />
                    </span>
                    <span v-if="scope.row.rank == 3" class="svg-container medal">
                      <svg-icon icon-class="copper-medal" />
                    </span>
                    <span v-if="scope.row.rank > 3" class="svg-container">{{ scope.row.rank }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="userView" label="头像" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px;" :src="view + scope.row.userView" :preview-src-list="[view + scope.row.userView]">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="userRealName" label="真实姓名" align="center" show-overflow-tooltip />
                <el-table-column prop="deptName" label="部门名称" align="center" show-overflow-tooltip />
                <el-table-column prop="scoreTotal" label="总积分" align="center" show-overflow-tooltip />
                <el-table-column label="操作" fixed="right" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleView(scope.row)"
                    >明细
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
            </section>
          </el-col>
        </el-row>
      </template>
    </section>
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import { querySpecialRank, exportFile } from './../api/rank'
import { exportSign } from '@/utils/fileImportOrExportSign'
export default {
  name: 'IntegralstatisticsMain',
  components: { Pagination },
  data() {
    return {
      active: '3',
      view: '/API-DOCUMENT/document/file/download?id=',
      search: {
        userRealName: '',
        breakthroughActivityId: ''
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      listLoading: false,
      list: [],
      specials: [],
      time: '2020-1-16'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleTabClick() {
      console.log(this.active)
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleReset() {
      this.search.userRealName = ''
      this.getList()
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        userRealName: this.search.userRealName
      }
      return new Promise((resolve, reject) => {
        querySpecialRank(query).then(response => {
          this.listLoading = false
          this.list = response.data.data.data.rows
          this.total = response.data.data.data.total
          this.time = response.data.data.time
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    },
    handleView(row) {
      this.$router.push({
        path: this.$filterPath('detail'),
        query: { i: row.userId }
      })
    },
    handleDownload() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const query = exportSign({ userRealName: this.search.userRealName }).obj
      exportFile(query)
        .then((res) => {
          const fileName = '积分排行榜.xlsx'
          loading.close()
          const content = res.data
          const blob = new Blob([content])
          if ('download' in document.createElement('a')) {
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch(() => {
          // this.$message.error()
          loading.close()
        })
    }

  }
}
</script>
<style lang="scss">
.integralstatistics-main {
  padding: 10px;

  .top-box{
    width: 100%;
    position: relative;
  .el-tabs {
    padding: 0 10px;
    background-color: #fff;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-wrap::after {
      height: 0;
    }
  }
  .update-time{
    position: absolute;
    right: 20px;
    bottom: 5px;
    z-index: 1;
    color: red;
    font-size: 14px;
   }
  }

  .main-inner {
    margin-top: 10px;
    .inner-search {
      background-color: #fff;
      padding: 10px;
      .search-item {
        margin-bottom: 10px;
        .item-label {
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }

        .el-input,
        .el-select {
          width: 100%;
        }
      }
    }

    .inner-table {
      .medal {
        font-size: 24px;
      }

      .el-image .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
      }
    }
    .top-container{
      padding: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
